<template>
  <ele-table-select
    ref="select"
    :clearable="true"
    size="small"
    :value="value"
    placeholder="请选择"
    value-key="id"
    label-key="name"
    prefix-icon="el-icon-search"
    :table-config="tableConfig"
    @select="updateValue"
  >
    <template v-slot:toolbar>
      <div style="max-width: 200px">
        <el-input
          clearable
          size="small"
          v-model="where.keywords"
          placeholder="输入关键字搜索"
          prefix-icon="el-icon-search"
          @change="search"
        />
      </div>
    </template>
    <template v-slot:package="{ row }">
      <div  v-if="row.type==1 && row.is_infinite == 0">
        <div>形象克隆次数：{{row.avatar_twin_count}}</div>
        <div>声音克隆次数：{{row.voice_twin_count}}</div>
        <div>视频剪辑时长：{{row.video_clip_count}}</div>
      </div>
      <div  v-if="row.type==1 && row.is_infinite == 1">
        <div>形象克隆次数：无限</div>
        <div>声音克隆次数：无限</div>
        <div>视频剪辑时长：无限</div>
      </div>
      <div  v-if="row.type==2">
        <div>点数：{{row.point}}</div>
      </div> 
    </template>
  </ele-table-select>
  
</template>

<script>
  import { packageList } from '@/api/package/list';
  export default {
    name: 'Pages',
    props: {
      type:0,
      // 修改回显的数据
      value: undefined
    },
    data() {
      return {
        // 搜索表单
        where: {
          keywords: ''
        },
        tableConfig: {
          datasource: ({ page, limit, where, order }) => {
            where.type = this.type;
            return packageList({ ...where, ...order, page, limit });
          },
          columns: [
            {
              columnKey: 'index',
              type: 'index',
              width: 45,
              align: 'center'
            },
            {
              prop: 'name',
              label: '名称',
              showOverflowTooltip: true,
              minWidth: 110,
            },
            {
              prop: 'money',
              label: '价格',
              showOverflowTooltip: true,
              minWidth: 110
            },
            {
              prop: 'package',
              label: '套餐',
              showOverflowTooltip: true,
              minWidth: 110,
              slot: 'package'
            },
          ],
          rowClickChecked: true,
          rowClickCheckedIntelligent: false,
          toolkit: ['reload', 'columns'],
          size: 'small',
          toolStyle: { padding: '0 10px' }
        }
      };
    },
    methods: {
      reload(){
        this.$refs.select.reload();
      },
      updateValue(data) {
        this.$emit('done', data);
      },
      // 搜索
      search(where) {
        where.type = this.type;
        this.$refs.select.reload({
          where: where,
          page: 1
        });
      }
    }
  };
</script>
